<template>
  <view class="container">
	<u-image width="130rpx" height="130rpx"  mode="aspectFill" :src="avatar"></u-image>
	<view>
		<u-button size="mini" type="primary" :custom-style="btnStyle" @click="selectImage">选择头像</u-button>
		<u-button size="mini" type="primary" :custom-style="btnStyle" @click="uploadImage">上传头像</u-button>
	</view>
  </view>
</template>

<script>
import { ossImage } from '../../../utils/ossUpload'
  export default {
	  name: 'avatarUpload',
    data() {
      return {
		avatar: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/%E5%A4%B4%E5%83%8F.png', // 用于存储头像的base64编码
		btnStyle: {
			marginTop: '20rpx',
			marginRight: '10rpx'
		}
	  }
    },
    methods: {
      selectImage() {
        uni.chooseImage({
          count: 1,
          sizeType: ['compressed'],
          sourceType: ['album', 'camera'],
          success: (res) => {
            this.avatar = res.tempFilePaths[0]
          }
        })
      },
      uploadImage() {
        uni.uploadFile({
          url: 'http://your-upload-api-url',
          filePath: this.avatar,
          name: 'file',
          header: {
            'Authorization': 'Bearer ' + uni.getStorageSync('token')
          },
          success: (res) => {
            uni.showToast({
              title: '上传成功'
            })
          }
        })
      },
	  uploadAvatar() {
		  ossImage(this.avatar)
	  }
    }
  }
</script>

<style>
  .container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .avatar {
    width: 160rpx;
    height: 160rpx;
	border-radius: 100rpx;
  }
  .btn {
    width: 150rpx;
    height: 40rpx;
    margin-bottom: 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
  }
</style>